<template>
  <div v-cloak>
   <!-- v-pre 不需要表达式 将 Mustache{{}}表达式原样输出 -->
     <h1 v-pre>{{三国演义}}</h1>
     <div>
      <h1 v-for="item in list" :key="item">{{item}}</h1>
     </div>
     <!-- v-cloak 
    防止浏览器 看到Mustache 语法的编译过程 配置css使用 去写 [v-cloak] {
       display: none;
      }
  -->
  <!-- 自定义指令 -->
  <input type="text" v-focus="flag" />
  <h1 v-myshow="flag">
    今天星期三  马上放假了
  </h1>
  <h1 v-myif="flag">模仿v-if显示隐藏</h1>
  <button v-permission>冻结用户</button>  <button v-permission>汇款</button>
  <button >查看</button>
  <dir-com v-myshow="flag"></dir-com>
  </div>
</template>

<script>
// vue提供了Vue.directive() 注册全局指令
// directives配置项来注册局部指令
// 自定义指令方法有5个钩子函数 分别是bind inserted update 
// componentUpdate unbind 
// 在inserted的形参第一个是el 当前挂载指令的元素
// 第二参数是bindding bindding.name指令名
// bindding.value--指令后的值
// 应用场景： 封装按钮级别权限 控制指令 v-permission
import dirCom from './dirCom.vue'
export default {
  name: '2209vueIndex',
  components:{
    dirCom
  },
  directives:{ //vue的局部自定义指令
    myshow:{
        bind(){}, //指令挂载到元素
        inserted(el,binding){ //挂载指令的元素 加载父元素中 渲染完成
          console.log(el)
            if(binding.value){
              el.style.display="block"
            }else{
                el.style.display="none"
            }
        },
        update(){}, //发生虚拟dom更新的时候
        componentUpdate(){ //当前组件和子组件的虚拟dom更新完成

        },
        unbind(){ //指令被卸载

        }
    },
    myif:{
      bind(){},
      inserted(el,binding){
          if(binding.value){
            // 像父元素添加当前元素
            el.parentNode.appendChild(el)
          }else{
             el.parentNode.removeChild(el)
          }
      },
      update(){}
    }
  
  },
  data() {
    return {
      flag:true,
      list:["西藏","成都","长沙"],
      power:1,//1 代表超级管理员 2普通管理员
    };
  },
  

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
<style lang="less">
  [v-cloak] {
       display: none;
  }
</style>